<template>
  <div class="login-container">
    <div class="login_head"></div>
  <el-form :model="user" :rules="rules" ref="login-form"  class="login_form">
  <el-form-item prop="mobile">
    <el-input v-model="user.mobile"></el-input>
  </el-form-item>
  <el-form-item prop="code">
    <el-input type="text" v-model="user.code"></el-input>
  </el-form-item>
    <el-form-item prop="checked">
      <el-checkbox v-model="user.checked">
        我已阅读并同意用户协议和隐私条款
      </el-checkbox>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onlogin" class="login_btn"  :loading="login_flag">登录</el-button>
  </el-form-item>
</el-form>
  </div>
</template>
<script>
import { login } from '@/api/user.js'
export default {
  name: 'LoginIndex',
  data () {
    return {
      user: {
        // 手机号
        mobile: '13812344321',
        // 验证码
        code: '246810',
        checked: false
      },
      rules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' }
          // { pattern: /^1[3|5|7|8|9]\{9}$/, message: '请输入正确手机号', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { message: '请输入正确密码', trigger: 'blur' }
        ],
        checked: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                callback()
              } else {
                callback(new Error('请同意用户协议'))
              }
            },
            trigger: 'blur'
          }
        ]
      },
      // 登陆状态
      login_flag: false
    }
  },
  methods: {
    onlogin: function () {
      // console.log(this.login_flag)
      this.login_flag = true
      // console.log(user)
      this.$refs['login-form'].validate(async valid => {
        if (!valid) return
        const res = await login(this.user)
        // console.log(res)
        if (res.status === 201) {
          this.$message({
            message: '登陆成功',
            type: 'success'
          })
          this.$router.push('/')
          this.login_flag = false
        } else {
          this.$message({
            message: '登陆失败',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style  scoped lang="less">
.login_head{
  height: 57px;
  width: 100%;
  max-width: 300px;
  background: url("../../images/logo_index.png") no-repeat;
}
.login-container{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../../images/login_bg.jpg") no-repeat;
  background-size: 100% 100%;
}
.login_form{
  background:#fff;
  padding: 50px;
  min-width: 300px;
}
.login_btn{
  width: 100%;
}
</style>
